@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.domain-transfer-recommendation {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--studio-gray-0);
	box-shadow: none;

	@include break-mobile {
		align-items: center;
		justify-content: space-between;
	}

	.card-heading {
		font-weight: 600;
		margin: 0 0 4px;
	}

	.badge {
		margin-left: 0.8em;
		border-radius: 4px;
		font-size: $font-body-extra-small;
		font-weight: 500;
		position: relative;
		bottom: 2px;
	}

	&__message {
		font-size: $font-body-small;
		color: var(--color-text-subtle);
		max-width: 660px;
	}

	&__content {
		flex-grow: 1;
	}

	&__action {
		flex-grow: 0;
		margin-top: 16px;

		@include break-mobile {
			align-self: flex-start;
			margin-top: 16px;
		}
	}
}
